$(function () {
  // 定义一个全局变量  将来用于操作get参数
  let q = {
    pagenum: 1, //是	int	页码值
    pagesize: 10, //是	int	每页显示多少条数据
    cate_id: '', //否	string	文章分类的 Id
    state: '' //否	string	文章的状态，可选值有：已发布、草稿
  }

  // 需求1 初始化文章列表 封装函数将来复用
  initArticleList()
  //封装
  function initArticleList () {
    axios({
      url: '/my/article/list',
      method: 'get',
      params: q
    }).then(res => {
      //成功回调
      console.log(res)
      let {
        data: { status, data, message, total }
      } = res
      if (status != 0) {
        return layui.layer.msg(message)
      }
      let arr = []
      data.forEach(ele => {
        arr.push(`
                   <tr>
                       <td><a art_list="${ele.Id}" class="link-list" href="Javascript:;">${ele.title}</a></td>
                       <td>${ele.cate_name}</td>
                       <td>${formatDate(ele.pub_date)}</td>
                       <td>${ele.state}</td>
                       <td>
                         <a target="fm" href="/article/art_edit.html?id=${
                          ele.Id
                        }" class="layui-btn layui-btn-xs">修改</a> 
                         <button art_list="${
                           ele.Id
                         }" class="btn-del layui-btn layui-btn-danger layui-btn-xs">删除</button> 
                       </td>
                   </tr>
               `)
      })
      $('tbody')
        .empty()
        .html(arr.join(''))

      // 渲染完文章列表后分页
      renderPage(total)
    })
  }

  //需求2. 初始化渲染文章分类列表
  initArtCateList()

  // 后面要使用 建议封装
  function initArtCateList () {
    //发送ajax
    axios({
      url: '/my/article/cates'
    }).then(res => {
      //成功回调
      let {
        data: { status, data, message }
      } = res
      if (status != 0) {
        return layui.layer.msg(message)
      }
      let arr = [`<option value="">请选择文章所属分类</option>`]
      data.forEach(ele => {
        if (ele.Id < 0) return
        arr.push(`<option value="${ele.Id}">${ele.name}</option>`)
      })
      //循环结束赋值
      $('[name=cate_id]')
        .empty()
        .html(arr.join(''))
      layui.form.render()
    })
  }

  //需求3. 筛选
  $('#searchForm').on('submit', function (e) {
    e.preventDefault()
    q.cate_id = $('[name="cate_id"]').val()
    q.state = $('[name="state"]').val()
    initArticleList()
  })

  //需求4分页封装
  function renderPage (total) {
    layui.laypage.render({
      elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.pagesize, //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数
      curr: q.pagenum, //起始页。一般用于刷新类型的跳页以及HASH跳页。
      layout:['count','limit','prev', 'page', 'next','refresh','skip'],//layout 自定义排版
      limits:[2 , 3 , 5 , 10],
      jump: function (obj, first) {
        //obj包含了当前分页的所有参数，比如：
        console.log(obj.curr) //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit) //得到每页显示的条数

        //首次不执行
        if (!first) {
          //do something
          // 重新定义 当前点击页面为起始页
          q.pagenum = obj.curr
          // 重新定义 每页多少条
          q.pagesize = obj.limit
          initArticleList()
        }
      }
    })
  }

  //需求5 删除文章
  $('tbody').on('click','.btn-del',function(){
    let id = $(this).attr('art_list') 
    layer.confirm('是否删除文章?', {icon: 3, title:'提示'}, function(index){
      axios({
        url:'/my/article/delete/'+id
      }).then(res=>{
        //成功回调
        let {
          data: { status,message }
        } = res
        if (status != 0) {
          return layui.layer.msg(message)
        }
        layui.layer.msg('恭喜删除文章成功')
        //短路有运算 判断页面是不是只有一页
        $('.btn-del').length == 1 && q.pagenum > 1 && q.pagenum--
        initArticleList ()
        
        // $('.layui-laypage-refresh').click()
      })
      layer.close(index)
    })
  })  
  
  //需求6 预览文章
  $('tbody').on('click','.link-list',function(){
    let id = $(this).attr('art_list')
    //ajax请求
    axios({
      url:'/my/article/'+ id
    }).then(res=>{
      //成功回调
      console.log(res)
      let {
        data: { status, data, message }
      } = res
      if (status != 0) {
        return layui.layer.msg(message)
      }
      //弹出层预览文章
      layer.open({
        type: 1,
        area: ['85%', '85%'],
        title: '文章预览',
        content: `
            <div class="artinfo-box">
                <h1 class="artinfo-title">${data.title}</h1>
                <div class="artinfo-bar">
                  <span>作者：${data.author_id}</span>
                  <span>发布时间：${formatDate(data.pub_date)}</span>
                  <span>所属分类：${data.cate_id}</span>
                  <span>状态：${data.state}</span>
                </div>
                <hr>
                <img src="http://api-breakingnews-web.itheima.net${data.cover_img}" alt="" class="artinfo-cover">
                <div>${data.content}</div>
            </div>`
      })
    })
  })
})
